{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d62a6a1378c192dfdec8f3d745cf02594fbe95f7","tarball":"https://registry.npmjs.org/@material/touch-target/-/touch-target-4.0.0-canary.0.tgz","fileCount":6,"integrity":"sha512-hp43gQPjimWROrUG5GcEFNvtDJjQCl5C5B3mcyd8V5BZNpaXRcLQYB1i20CmQjS0Uv03tbaiX/G0E5Bnhew82Q==","signatures":[{"sig":"MEQCIHXoFDcnlA+JXpj5DZbhP8sdZkbUP9EazA6bZlVUWJ3dAiBZA+PAQ5Sb4C64rRZFesLZdbvUUr+VVRVteoWgJXuB6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEVCRA9TVsSAnZWagAA3/8P/RGgaUoi4vMup6Fi1Udl\nO8lbj2lS7bUmjMxAbP2Dnb9Eb79fGjSl4Yr6Ekhxvh1J4LnvGs3zev6Q8w7N\nLIikRy6GEtYFtpGRvQNa/qMnjr78u+jHuJ7FY97G/aq8o5f+s4LXiEo0FR5S\nALih7/bcmRNrcJmkXwG2fBmzRvVUNlAHZfTBJhKgY0/FArPyerrHFicfchNR\nvvvBD5CkYXfKncW/SO//DHufh6MQWKjbB4/Kt3k86Xnqflw6SwMZk9imZnmH\nodd9rrqqh+7LrBjTRyTVVq2k2pDNSWHH5zxlYx7ZDy4OLdJ7WzKyl4uHW01e\nYKhrLt7XbqDxj2JrNC1IYma5RakfAbFR+9IFsawHgI9cXJbghG/ldPG64fn+\neqW/eBXr4X0zxbqXhtj++iBnF7T/fzxLSv2K1RJrmxFoCpLylY1beXzpb0O6\nIvzfHStR0wceNxgDhhCwVDnmEVXVUD57mjhY7+89UD8YMFEhT6M/hQF5Wvwc\nXWrxMPKllvKqVg00UZFiKxJ/KB5onHlxu9Pjs6upegR07OWv+2IjmB0TTrl1\nW7toic9FZBiJM2tfbVki6HpCZpQKIi3Uk1y3uRpYJD551LFgtJL5k216oR7A\niC2kWWDN3mbRf34I5FKY3J3DlwKkTNd+9v+7X8iTTQhxcF/xXyMtj8XUnflX\noU4p\r\n=MFlo\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/touch-target","readme":"<!--docs:\ntitle: \"Touch Target\"\nlayout: detail\nsection: components\nexcerpt: \"Increased touch targets for components\"\npath: /catalog/touchtarget/\n-->\n\n# Touch Target\n\nTouch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element.\nFor example, a button may appear to be 48 x 36 px, but the padding surrounding it comprises the full 48 x 48 px touch target.\n\nMaterial Design spec states that touch targets should be at least 48 x 48 px.\nThe MDC Web library provides mixins and guidance on adding an increased touch target for the following components:\n* Button\n* Chips\n* Checkbox\n* Radio\n* Mini FAB\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/usability/accessibility.html#layout-typography\">Material Design guidelines: Touch Targets</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/touch-target\n```\n\n## Basic Usage\n\n### HTML Structure\n\nFor a given button component:\n\n```html\n<button class=\"mdc-button\">\n  <div class=\"mdc-button__ripple\"></div>\n  <span class=\"mdc-button__label\">My Inaccessible Button</span>\n</button>\n```\n\nYou would add an increased touch target as follows:\n\n```html\n<span>\n  <button class=\"mdc-button mdc-button--touch\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">My Accessible Button</span>\n    <div class=\"mdc-button__touch\"></div>\n  </button>\n</span>\n```\n\nNote that the wrapper `<span>` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n### Styles\n\n```css\n@import \"@material/touch-target/mdc-touch-target\";\n```\n\n## Style Customization\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-touch-target` | Applied to the inner touch target element.\n`mdc-touch-target-component` | Applied to the component root element. Adds margin to compensate for the increased touch target.\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","accessibility","touch target"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-touch-target"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Touch target mixins and variables for Material Components for the web","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/touch-target_4.0.0-canary.0_1567658261281_0.6199108640396107","host":"s3://npm-registry-packages"},"_id":"@material/touch-target@4.0.0-canary.0","version":"4.0.0-canary.0"}